<template>
  <div class="container">
    <el-card class="card-main">
      <!-- 头部提示 新增按钮 -->
      <el-row type="flex" justify="space-between" style="padding-bottom: 10px;">
        <span style="font-size:12px; color:pink">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" size="small" @click="$router.push('new')">
          <i class="el-icon-edit">&nbsp; 新增试题</i>
        </el-button>
      </el-row>
      <!-- 头部提示 新增按钮 -->
      <div class="form-body">
        <!-- 筛选表单 -->
        <el-form ref="formData" :model="formData" label-width="80px" size="small">
          <!-- 第一行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="formData.subjectID"
                  class="form-select"
                  placeholder="请选择"
                  @change="getSimpleList"
                >
                  <el-option
                    v-for="obj in subjectList"
                    :key="obj.id"
                    :label="obj.subjectName"
                    :value="obj.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="formData.catalogID" class="form-select" placeholder="请选择">
                  <el-option
                    v-for="obj in directorysList"
                    :key="obj.id"
                    :label="obj.label"
                    :value="obj.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="formData.tags" class="form-select" placeholder="请选择">
                  <el-option
                    v-for="obj in tagsList"
                    :key="obj.id"
                    :label="obj.label"
                    :value="obj.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input v-model="formData.keyword" placeholder="根据题干搜索" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- /第一行 -->
          <!-- 第二行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="formData.questionType" class="form-select" placeholder="请选择">
                  <el-option
                    v-for="item in questionType"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="formData.difficulty" class="form-select" placeholder="请选择">
                  <el-option
                    v-for="item in difficulty"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="formData.direction" class="form-select" placeholder="请选择">
                  <el-option
                    v-for="item in direction"
                    :key="item.id"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="formData.creatorID" class="form-select" placeholder="请选择">
                  <el-option
                    v-for="obj in creatorIDType"
                    :key="obj.id"
                    :label="obj.label"
                    :value="obj.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- /第二行 -->
          <!-- 第三行  -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="formData.remarks" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="formData.shortName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  ref="province"
                  v-model="formData.province"
                  style="width: 135px; margin-right:10px"
                  @focus="getProvinces"
                >
                  <el-option
                    v-for="it in provinces"
                    :key="it.index"
                    :label="it"
                    :value="it"
                  />
                </el-select>
                <el-select
                  v-model="formData.city"
                  style="width: 135px"
                  @focus="getCitys"
                >
                  <el-option
                    v-for="it in citys"
                    :key="it.index"
                    :label="it"
                    :value="it"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="end-col">
              <el-button type="primary" size="small" plain @click="clearForm">清除</el-button>
              <el-button type="primary" size="small" @click="searchBtn">搜索</el-button>
            </el-col>
          </el-row>
          <!-- /第三行 -->
        </el-form>
        <!-- /筛选表单 -->
        <!-- 提示消息 -->
        <el-alert :title="`当前一共有${page.total} 条数据`" type="info" show-icon style="margin: 10px 0 15px" />
        <!-- /提示信息 -->
        <!-- 试题表格信息 -->
        <el-table :data="questionsList" style="width:100%">
          <el-table-column prop="number" label="试题编号" width="120" stripe />
          <el-table-column prop="subject" label="学科" width="140" />
          <el-table-column prop="catalog" label="目录" width="138" />
          <el-table-column prop="questionType" label="题型" width="130">
            <template v-slot="{row}">
              <span v-if="row.questionType==='1'">单选</span>
              <span v-else-if="row.questionType==='2'">多选</span>
              <span v-else-if="row.questionType==='3'">简答</span>
              <!-- <span>{{ quesType }}</span> -->
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="290">
            <template v-slot="{row}">
              <div v-html="row.question" />
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="176" :formatter="formatTime" />
          <el-table-column prop="difficulty" label="难度" width="140">
            <template #default="{ row }">
              {{ row.difficulty | difficultyFilters }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="130" />
          <el-table-column prop="id" label="操作" width="180">
            <template #default="{ row }">
              <el-button
                type="primary"
                icon="el-icon-view"
                size="small"
                circle
                plain
                @click="getQuestionDetail(row.id)"
              />
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                circle
                plain
                @click="editQuestion(row.id)"
              />
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small"
                circle
                plain
                @click="removeQuestion(row.id)"
              />
              <el-button
                type="warning"
                icon="el-icon-check"
                size="small"
                circle
                plain
                @click="addSelect(row.id)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- /试题表格信息 -->
        <!-- 分页组件 -->
        <el-row type="flex" justify="end">
          <el-pagination
            :current-page="page.page"
            :page-size="page.pagesize"
            :page-sizes="[5, 10, 20, 50]"
            :total="page.total"
            layout="prev, pager, next, sizes, jumper"
            background
            style="margin-top: 20px"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
          <!-- /分页组件 -->
        </el-row>
      </div>
    </el-card>
    <!-- 点击查看 弹层 -->
    <questionsPreview ref="questionsPreview" :question-details="questionDetails" />
  </div>
</template>

<script>
// 查看弹层
import questionsPreview from '../components/questions-preview.vue'
// 获取基础题库列表 获取详细题库列表 删除 加入精选 获取精选列表
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
// 获取简单标签列表
import { simple } from '@/api/hmmm/tags.js'
// 获取学科列表
import { list as subjectList } from '@/api/hmmm/subjects.js'
// 获取简单目录列表
import { simple as directorysList } from '@/api/hmmm/directorys.js'
// 难度 题型 方向
import { difficulty, questionType, direction, creatorIDType } from '@/api/hmmm/constants.js'
// 省份 城市
import { provinces, citys } from '@/api/hmmm/citys.js'
import dayjs from 'dayjs'

export default {
  name: 'Questions',
  components: { questionsPreview },
  filters: {
    questionFilters(num) {
      const arr = questionType.find(item => item.value === +num)
      return arr ? arr.label : '未知'
    },
    difficultyFilters(num) {
      const arr = difficulty.find(item => item.value === +num)
      return arr ? arr.label : '未知'
    }
  },
  data() {
    return {
      formData: {}, // 题库列表
      provinces: [], // 省份
      citys: [], // 城市
      questionType, // 试题类型
      difficulty, // 难度
      direction, // 方向
      creatorIDType, // 录入人
      questionsList: [], // 问题列表
      subjectList: [], // 学科列表
      tagsList: [], // 标签列表
      directorysList: [], // 目录列表
      questionQueryParams: {
        id: null
      }, // 获取题目详情请求体
      showQuestionDialog: false, // 题目预览弹框
      questionDetails: {}, // 题目详情
      page: {
        total: 0,
        page: 1,
        pagesize: 5
      }
    }
  },
  created() {
    this.getList()
    this.getSubjectList()
  },
  methods: {
    // 获取标签简单列表
    async getSimpleList(id) {
      const ret = await simple({ subjectID: id })
      this.tagsList = ret.data
      const res = await directorysList({ subjectID: id })
      this.directorysList = res.data
    },
    // 获取简单学科列表
    async getSubjectList() {
      const { data } = await subjectList({ pagesize: 100 })
      this.subjectList = data.items
    },
    // 获取基础题库列表
    async getList() {
      const { data } = await list({ ...this.page, ...this.formData })
      this.page.total = data.counts
      this.questionsList = data.items
    },
    // 点击顶部搜索按钮
    async searchBtn() {
      this.page.page = 1
      this.getList()
    },
    // 点击顶部清除按钮
    clearForm() {
      this.formData = {}
      this.page.page = 1
      this.getList()
    },
    // 加入精选
    async addSelect(id) {
      const ret = await this.$confirm('此操作将该题目加入精选，是否继续?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'info'
      }).catch(err => err)
      if (ret === 'cancel') return
      await choiceAdd({ id: id, choiceState: 1 })
      this.$message.success('加入精选题库成功!')
    },
    // 删除操作
    async removeQuestion(id) {
      const ret = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).catch(err => err)
      if (ret === 'cancel') return
      if (this.page.page > 1 && this.questionsList.length === 1) {
        this.page.page--
      }
      await remove({ id })
      this.$message.success('删除成功')
      this.getList()
    },
    // 修改操作
    editQuestion(id) {
      this.$router.push({
        path: 'new',
        query: { id: id }
      })
    },
    // 查看操作
    // lookQuestion(id) {
    //   this.$refs.QuestionsPreview.detail(id)
    //   this.showQuestionsPreview = true
    // },
    async getQuestionDetail(id) {
      // 打开弹框
      this.$refs.questionsPreview.showQuestionDialog = true
      // console.log(id)
      this.questionQueryParams.id = id
      const { data } = await detail(this.questionQueryParams)
      this.questionDetails = data
    },
    // 格式化时间
    formatTime(row, column, cellValue) {
      return cellValue ? dayjs(cellValue).format('YYYY-MM-DD hh:mm:ss') : '时间无效'
    },
    // 当前页码
    handleCurrentChange(val) {
      this.page.page = val
      this.getList()
    },
    // 切换页码
    handleSizeChange(val) {
      this.page.pagesize = val
      this.getList()
    },
    // 城市
    getProvinces() {
      this.provinces = provinces()
    },
    // 城区
    getCitys() {
      this.citys = citys(this.$refs.province.value)
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  font-size: 14px;
  padding-right: 22px;
  .card-main {
    width: 100%;
    margin: 10px;
    .form-body {
      .form-select {
        width: 282px;
      }
      .end-col {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
